import { useEffect, useState } from "react";
import { Form, Button } from "antd";
// import { API } from '@request/api';
import {API} from '../../request/api'
import { FormItemButton, FormItemInput, FormItemSearch, FormItemSelect } from "@/components/antd/form/index";
import { WidgetPaginatinProps, WidgetPaginatin } from "@components/widget/index";
import { InitPagition } from "@/components/widget/WidgetPagination";
import { ProductItemVo } from "@vo/ProductVo";
import { ProductItemQueryDto } from "@dto/ProductDto";
import { ProductItemStatus } from '@enum/ProductEnum'
import Table, { TableColumn } from "@/components/antd/table/Table";
import { useNavigate } from "react-router-dom";
const tableColumn: TableColumn[] = [
    {
        key: "coverUrl",
        title: "商品图片",
        type: "IMG"
    },
    {
        key: "title",
        title: "商品名称",
        type: "TEXT"
    },
    {
        key: "description",
        title: "商品描述",
        type: "TEXT"
    },
    {
        key: "price",
        title: "商品价格",
        type: "TEXT"
    },
    {
        key: "stockTotal",
        title: "商品库存",
        type: "TEXT"
    },
    {
        key: "menu",
        title: "商品类型",
        type: "TEXT"
    },
    {
        key: "status",
        title: "商品状态",
        type: "STATUS",
        value:ProductItemStatus
    },
    {
        key: "操作",
        title: "操作",
        type: "ACTION"
    }
]

const ProductItem = () => {
    const navigate = useNavigate();
    const [items, setItems] = useState<ProductItemVo[]>([]);
    const [pagition, setPagition] = useState<WidgetPaginatinProps>
        (
            InitPagition(() => (page: number, size: number) => setPagition({ ...pagition, page, size }))
        );
    const [form] = Form.useForm<ProductItemQueryDto>();
    const getProductItems = async () => {
        try{
            const { page, size } = pagition;
            const res = await API.queryProductItems(Object.assign(form.getFieldsValue(), { page, size }))
            setItems(res.items);
        }catch(e){
            console.log("错误",e)
        }

    }

    const onHandlerAdd = () => {
        navigate("/products/items/add")
    }

    useEffect(() => {
        form.setFieldsValue({
            keywords: '',
            menu: '',
            status: ''
        });
        getProductItems();
    }, []);

    const onReset = () => {
        form.resetFields();
    }

    const onConfirm = () => {
        getProductItems();
    }
    return (
        <>
            <Button onClick={onHandlerAdd}>添加商品</Button>
            <Form form={form} layout="inline">
                <FormItemInput  name="keywords" label="关键字" />
                <FormItemSearch name="menu" label="类型" api="queryProductMenuItems" valueKey="menu" labelKey="menu"  />
                <FormItemSelect name="status" options={ProductItemStatus} label="状态" />
                <FormItemButton onReset={onReset} onConfirm={onConfirm} />
            </Form>
            <Table items={items} column={tableColumn} api="deleteProductItem" onDelete={getProductItems} />
            <WidgetPaginatin {...pagition}/>
        </>
    )
}
export default ProductItem;